<template>
  <div class="plan">
    <p class="plan_name">广告投放计划({{count}})</p>
    <div class="inputBox">
      <el-button type="primary" icon="el-icon-plus">添加</el-button>
      <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
      <div class="rightBox">
        <el-date-picker
          v-model="value6"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
     <div class="search">
         <el-input v-model="input2" placeholder="请输入搜索关键字"></el-input>
          <i class="iconfont icon-search"></i>
     </div>
      </div>
    </div>
    <div class="tab">
      <el-table :data="planData" stripe style="width: 100%">
        <el-table-column prop="date" label="发布时间" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.ap_date | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="广告标题" width="">
          <template slot-scope="scope">
            <span>{{scope.row.ad_name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="曝光量" >
          <template slot-scope="scope">
            <span>{{scope.row.ap_f_cpv}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="点击量" >
          <template slot-scope="scope">
            <span>{{scope.row.ap_f_cpc}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="点击率（%）" >
          <template slot-scope="scope">
            <!-- <span>{{scope.row.ap_f_cpc/scope.row.ap_f_cpv}}</span> -->
            <span>{{scope.row.ap_f_cpc==0?0:scope.row.ap_f_cpc/scope.row.ap_f_cpv*100+".00%"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="单价（元）">
          <template slot-scope="scope">
            <span style="color:#FE5411">{{scope.row.ap_price}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="损耗（元）">
          <template slot-scope="scope">
            <span style="color:#FE5411">￥{{(scope.row.ap_f_cpc*scope.row.ap_price).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日限额（元）">
          <template slot-scope="scope">
            <span>￥{{(scope.row.ap_cpc*scope.row.ap_price).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="定向终端">
          <template slot-scope="scope">
            <span v-if="scope.row.ap_terminal==0">不定向</span>
            <span v-if="scope.row.ap_terminal==1">Android</span>
            <span v-if="scope.row.ap_terminal==2">IOS</span>
           </template>
        </el-table-column>
        <el-table-column prop="date" label="定向微信">
          <template slot-scope="scope">
            <span v-if="scope.row.ap_wechat==0">否</span>
            <span v-if="scope.row.ap_wechat==1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.ad_isfreezen==1">开启中</span>
            <span style="color:red" v-if="scope.row.ad_isfreezen==0">暂停</span>
          </template>
        </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>
import { formatDate } from "../../common/js/common.js";

export default {
  data() {
    return {
      count: "",
      input: "",
      input2: "",
      value6: "",
      planData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    }
  },
  mounted() {
    this.planDataInit();
  },
  methods: {
    planDataInit() {
      this.$http({
        method: "POST",
        url: "/ad/action/t_adplan_do.jsp",
        data: `action=query&a_id=11`
      }).then(res => {
        console.log(res);
        this.count = res.data.count;
        this.planData = res.data.data;
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.plan {
  width: 100%;
  height: 800px;
  padding: 25px;
  box-sizing: border-box;
  position: relative;

  .plan_name {
    color: #333;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .inputBox {
    position: relative;
    margin-bottom: 20px;

    .rightBox {
      width: 660px;
      position: absolute;
      right: 0;
      top: -1px;
      height: 38px;

      .search {
        width: 300px;
        float: right;
      }

      .icon-search {
        position: absolute;
        right: 10px;
        top: 12px;
        font-weight: 600;
        color: #999;
      }
    }
  }
}
</style>

